<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - markers demo</title>

  <link rel="stylesheet" href="../dist/photo-sphere-viewer.css">
  <link rel="stylesheet" href="../dist/plugins/markers.css">

  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    #photosphere {
      width: 100%;
      height: 100%;
    }

    .psv-button.custom-button {
      font-size: 22px;
      line-height: 20px;
    }

    .demo-label {
      color: white;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
      text-align: center;
      padding: 5px;
      border: 1px solid white;
      background: rgba(0, 0, 0, 0.4);
    }
  </style>
</head>
<body>

<div id="photosphere"></div>

<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/promise-polyfill/dist/polyfill.js"></script>
<script src="../node_modules/uevent/browser.js"></script>
<script src="../node_modules/nosleep.js/dist/NoSleep.js"></script>
<script src="../dist/photo-sphere-viewer.js"></script>
<script src="../dist/plugins/gyroscope.js"></script>
<script src="../dist/plugins/stereo.js"></script>
<script src="../dist/plugins/markers.js"></script>

<!-- text used for the marker description -->
<script type="text/template" id="pin-content">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
    semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien
    ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.
    Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a
      href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet
    congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus
    est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <img src="assets/pin-blue.png" style="width:100%"/>

  <pre><code>
#header h1 a {
	display: block;
	width: 300px;
	height: 80px;
}
</code></pre>
</script>

<!-- pattern used for the polygon marker -->
<svg id="patterns">
  <defs>
    <pattern id="dots" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" style="stroke: none; fill: rgba(255,0,0,0.4)"/>
    </pattern>
    <pattern id="points" x="10" y="10" width="15" height="15" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.8" style="stroke: none; fill: red"/>
    </pattern>
  </defs>
</svg>

<script>
  const PSV = new PhotoSphereViewer.Viewer({
    container : 'photosphere',
    panorama  : 'sphere.jpg',
    caption   : 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
    loadingImg: 'assets/photosphere-logo.gif',
    navbar    : [
      'autorotate', 'zoom', 'download', 'markers', 'markersList',
      {
        content  : '💬',
        title    : 'Show all tooltips',
        className: 'custom-button',
        onClick  : function () {
          markers.toggleAllTooltips();
        }
      },
      'caption', 'gyroscope', 'stereo', 'fullscreen',
    ],
    plugins   : [
      PhotoSphereViewer.GyroscopePlugin,
      PhotoSphereViewer.StereoPlugin,
      [PhotoSphereViewer.MarkersPlugin, {
        markers: (function () {
          var a = [];

          for (var i = 0; i < Math.PI * 2; i += Math.PI / 4) {
            for (var j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
              a.push({
                id       : '#' + a.length,
                tooltip  : '#' + a.length,
                latitude : j,
                longitude: i,
                image    : 'assets/pin-red.png',
                width    : 32,
                height   : 32,
                anchor   : 'bottom center',
                data     : {
                  deletable: true,
                },
              });
            }
          }

          a.push({
            id       : 'lorem',
            tooltip  : {
              content : 'Lorem ipsum dolor ist amet et consecturo.',
              position: 'bottom right',
            },
            content  : document.getElementById('pin-content').innerHTML,
            latitude : 0.32,
            longitude: 0.11,
            image    : 'assets/pin-blue.png',
            width    : 32,
            height   : 32,
            anchor   : 'bottom center',
          });

          a.push({
            id        : 'polygon-sky',
            svgStyle  : {
              fill: 'rgba(0, 190, 255, 0.1)',
            },
            polygonRad: [
              [6.0848, 0.1806],
              [0.1022, 0.3166],
              [0.6333, 0.3836],
              [1.2396, 0.5112],
              [1.7922, 0.5544],
              [2.7635, 0.7853],
              [3.3688, 0.4723],
              [3.6902, 0.6161],
              [4.2981, 0.6942],
              [4.6605, 0.6618],
              [5.4694, 0.1880],
              [5.7125, 0.1302],
            ],
          });

          a.push({
            id        : 'polygon',
            content   : 'This mountain is so great it has dots on it!',
            polylinePx: [
              [2941, 1413],
              [3042, 1402],
              [3222, 1419],
              [3433, 1463],
              [3480, 1505],
              [3438, 1538],
              [3241, 1543],
              [3041, 1555],
              [2854, 1559],
              [2739, 1516],
              [2775, 1469],
              [2941, 1413],
            ],
            svgStyle  : {
              fill       : 'url(#points)', //'rgba(255,0,0,0.3)',
              stroke     : 'rgba(255, 0, 50, 0.8)',
              strokeWidth: '2px',
            },
            tooltip   : {
              content : 'This is a mountain',
              position: 'right bottom',
            },
          });

          a.push({
            id        : 'polyline',
            polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
            svgStyle  : {
              stroke        : 'rgba(80, 150, 50, 0.8)',
              strokeLinecap : 'round',
              strokeLinejoin: 'round',
              strokeWidth   : '20px',
            },
            tooltip   : 'This is a track',
          });

          a.push({
            id       : 'html-img-demo',
            html     : 'HTML & Image',
            scale    : [0.5, 1.5],
            className: 'demo-label',
            longitude: 0.5,
            latitude : -0.48,
            hideList : true,
          });

          a.push({
            id         : 'gif',
            image      : 'assets/photosphere-logo.gif',
            width      : 100,
            height     : 100,
            longitude  : 0.60,
            latitude   : -0.35,
            listContent: 'An animated gif',
          });

          a.push({
            id       : 'text',
            html     : 'This <b>is</b> text <img src="assets/pin-blue.png" style="height: 24px; vertical-align: top;"/>',
            anchor   : 'bottom right',
            style    : {
              color     : 'white',
              fontSize  : '20px',
              fontFamily: 'Helvetica, sans-serif',
              textAlign : 'center',
            },
            longitude: 0.45,
            latitude : -0.4,
          });

          a.push({
            id       : 'svg-demo',
            html     : 'SVG marker demo',
            scale    : [0.5, 1.5],
            className: 'demo-label',
            longitude: -0.5,
            latitude : -0.48,
            hideList : true,
          });

          a.push({
            id       : 'circle',
            tooltip  : 'A circle of radius 30',
            circle   : 30,
            svgStyle : {
              fill       : 'rgba(255,255,0,0.3)',
              stroke     : 'yellow',
              strokeWidth: '2px',
            },
            longitude: -0.5,
            latitude : -0.28,
            anchor   : 'center right',
          });

          a.push({
            id       : 'ellipse',
            tooltip  : 'An ellipse of radius 60/30',
            ellipse  : [60, 30],
            svgStyle : {
              fill       : 'rgba(255,255,0,0.3)',
              stroke     : 'yellow',
              strokeWidth: '2px',
            },
            longitude: -0.5,
            latitude : -0.28,
            anchor   : 'center left',
          });

          a.push({
            id       : 'rect',
            tooltip  : 'A square a side 60',
            rect     : [60, 60],
            svgStyle : {
              fill       : 'rgba(255,255,0,0.3)',
              stroke     : 'yellow',
              strokeWidth: '2px',
            },
            longitude: -0.5,
            latitude : -0.38,
            anchor   : 'center right',
          });

          a.push({
            id       : 'path',
            tooltip  : 'A custom path',
            path     : 'M 0 0 L 60 60 L 60 0 L 0 60 L 0 0',
            svgStyle : {
              fill       : 'rgba(255,255,0,0.3)',
              stroke     : 'yellow',
              strokeWidth: '2px',
            },
            longitude: -0.5,
            latitude : -0.38,
            anchor   : 'center left',
          });

          a.push({
            id       : 'scale-demo',
            html     : 'Marker scale demo',
            scale    : [0.5, 1.5],
            className: 'demo-label',
            longitude: 0,
            latitude : -0.48,
            hideList : true,
          });

          a.push({
            id       : 'scale-0',
            tooltip  : 'No scale',
            scale    : false,
            circle   : 20,
            svgStyle : {
              fill: 'rgba(0, 0, 0, 0.5)',
            },
            longitude: -0.1,
            latitude : -0.4,
          });

          a.push({
            id       : 'scale-1',
            tooltip  : '<code>zoom x2</code>',
            scale    : 2,
            circle   : 20,
            svgStyle : {
              fill: 'rgba(0, 0, 0, 0.5)',
            },
            longitude: 0,
            latitude : -0.4,
          });

          a.push({
            id       : 'scale-2',
            tooltip  : '<code>zoom x0.5 ; zoom x1.5</code>',
            scale    : [0.5, 1.5],
            circle   : 20,
            svgStyle : {
              fill: 'rgba(0, 0, 0, 0.5)',
            },
            longitude: 0.1,
            latitude : -0.4,
          });

          return a;
        }())
      }]
    ]
  });

  var markers = PSV.getPlugin(PhotoSphereViewer.MarkersPlugin);

  PSV.on('click', function (e, data) {
    if (!data.rightclick) {
      markers.addMarker({
        id       : '#' + Math.random(),
        tooltip  : 'Generated marker',
        longitude: data.longitude,
        latitude : data.latitude,
        image    : 'assets/pin-red.png',
        width    : 32,
        height   : 32,
        anchor   : 'bottom center',
        data     : {
          deletable: true,
        },
      });
    }
  });

  markers.on('select-marker', function (e, marker, data) {
    console.log('select', marker.id);

    if (marker.data && marker.data.deletable) {
      if (data.dblclick) {
        markers.removeMarker(marker);
      }
      else if (data.rightclick) {
        markers.updateMarker({
          id   : marker.id,
          image: 'assets/pin-blue.png',
        });
      }
    }
  });

  markers.on('unselect-marker', function (e, marker) {
    console.log('unselect', marker.id);
  });

  markers.on('over-marker', function (e, marker) {
    console.log('over', marker.id);
  });

  markers.on('leave-marker', function (e, marker) {
    console.log('leave', marker.id);
  });

  markers.on('select-marker-list', function (e, marker) {
    console.log('select-list', marker.id);
  });

  markers.on('goto-marker-done', function (e, marker) {
    console.log('goto-done', marker.id);
  });
</script>
</body>
</html>
